<template>
  <el-container class="student-dashboard">
    <!-- 1. 顶部栏（消息铃铛 + 退出） -->
    <el-header class="top-bar">
      <NavHeader />
    </el-header>

    <!-- 2. 主体区（左侧菜单 + 右侧内容） -->
    <el-container>
      <el-aside width="260px">
        <!-- 角色卡片 -->
        <UserProfileCard class="role-card" />
        <!-- 导航菜单 -->
        <el-menu
            :default-active="$route.name"
            class="student-menu"
            router
            :collapse="false"
            :unique-opened="true"
        >
          <el-menu-item index="StudentCoachCenter" route="/dashboard/student/coach-center">
            <el-icon><Avatar /></el-icon>
            <span>教练中心</span>
          </el-menu-item>

          <el-menu-item index="StudentMyCourses" route="/dashboard/student/my-courses">
            <el-icon><Calendar /></el-icon>
            <span>我的课程</span>
          </el-menu-item>

          <el-menu-item index="StudentPayment" route="/dashboard/student/payment-center">
            <el-icon><Money /></el-icon>
            <span>缴费中心</span>
          </el-menu-item>

          <el-menu-item index="StudentMatchSignup" route="/dashboard/student/match-signup">
            <el-icon><Trophy /></el-icon>
            <span>月赛报名</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed, watch, onMounted } from 'vue'
import NavHeader from '@/views/dashboard/components/NavHeader.vue'
import UserProfileCard from '@/views/dashboard/components/UserProfileCard.vue'
import {
  Avatar, Calendar, Money, Trophy
} from '@element-plus/icons-vue'
// 关键修改：从 user.js 导入，而非 auth.js

import { useUserStore } from '@/stores/user'
// 关键修改：使用 userStore 获取用户信息
const userStore = useUserStore()
const user = computed(() => userStore.user)

// 监听 user 变化（数据来源已修正为 userStore）
watch(
    user,
    (newUser, oldUser) => {
      console.log('=== 当前登录用户信息（更新后）===', newUser)
      if (oldUser) {
        console.log('=== 用户信息更新前 ===', oldUser)
      }
    },
    { immediate: true, deep: true }
)

// 组件挂载后打印用户信息（来源修正）
onMounted(() => {
  console.log('=== 学生主界面挂载完成，当前登录用户 ===', user.value)
  // 若未获取到用户信息，触发一次数据加载（新增：确保数据已加载）
  if (!user.value) {
    console.warn('⚠️  当前未获取到用户信息，尝试重新加载...')
    userStore.fetchCurrentUserInfo() // 调用 userStore 的方法加载用户信息
  }
})
</script>

<style scoped lang="scss">
.student-dashboard {
  height: 100vh;
  flex-direction: column;
}
.top-bar {
  height: 60px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.role-card {
  margin-bottom: 12px;
}
.student-menu {
  border-right: none;
}
</style>